<template>
  <el-dialog 
    v-model="visible" 
    title="空派待确认详情"
  >
    <customContainer :config="config" />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'
import { ElButton, ElDivider, ElDropdown } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'

const visible = ref<boolean>(false)
const open = (args) => {
  visible.value = true
}

const config = ref({
  query: {
    fields: [
      {
        label: '客户单号',
        prop: 'khmc',
        option: {
          type: 'textarea',
        },
      },
      {
        label: '销售产品',
        prop: 'zdbh',
      },
      {
        type: 'date-picker',
        label: '开始日期',
        prop: 'startTime',
        option: {
          type: 'date',
        },
      },
      {
        type: 'date-picker',
        label: '结束日期',
        prop: 'endTime',
        option: {
          type: 'date',
        },
      },
    ],
    queryParams: {
      pageSize: 10,
      pageNum: 1,
      khmc: undefined,
      zdbh: undefined,
      startTime: undefined,
      endTime: undefined,
    },
    formOption: {
      labelPosition: 'top',
    },
  },
  btns: [
    {
      title: '导出',
      type: 'primary',
      icon: Upload,
      onClick(e) {
        console.log(e)
      },
    },
    {
      title: '全部确认',
      type: 'primary',
      icon: Upload,
      onClick(e) {
        console.log(e)
      },
    },
    {
      title: '全部不确认',
      type: 'primary',
      icon: Upload,
      onClick(e) {
        console.log(e)
      },
    },
    {
      title: '批量确认账单',
      type: 'primary',
      icon: Upload,
      onClick(e) {
        console.log(e)
      },
    },
    {
      title: '多票剔除',
      type: 'danger',
      icon: Upload,
      onClick(e) {
        console.log(e)
      },
    },
  ],
  table: {
    columns: [
      { type: 'selection', width: '55' },
      { label: '创建时间', align: 'center', prop: 'mainTransferOrderNo' },
      { label: '账单编号', align: 'center', prop: 'transferOrderNo' },
      { label: '客户名称', align: 'center', prop: 'customerName' },
      { label: '状态', align: 'center', prop: 'status' },
      { label: '单价', align: 'center', prop: 'price' },
      {
        label: '操作',
        width: '200',
        render(h, params) {
          return [
            h(
              ElButton,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                  handleDetail(params.row)
                },
              },
              {
                default: () => '确认',
              },
            ),
            h(
              ElDivider,
              {
                direction: 'vertical',
              },
            ),
            h(
              ElButton,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                  handlePush(params.row)
                },
              },
              {
                default: () => '不确认',
              },
            ),
            h(
              ElDivider,
              {
                direction: 'vertical',
              },
            ),
            h(
              ElDropdown,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                  handlePush(params.row)
                },
              },
              
            ),
                
          ]
        },
      },
    ],
    event: {
      onRowClick(e) {
        console.log(e)
      },
    },
  },
  api: (params) => Promise.resolve({
    code: 200,
    total: 2,
    data: [{ receivingTotalWeight: 133 }, { receivingTotalWeight: 666 }], 
  }),
})

defineExpose({
  open,
})

</script>

<script lang="ts">
export default {
  name: 'AirDetailDialog',
}
</script>
